<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogAdd.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog"
  >
    <el-form
      ref="addFormRef"
      v-loading="loading"
      :model="formData"
      :rules="rules"
      label-width="200"
      size=""
    >
      <el-row justify="start" class="d_left">
        <el-col :span="itemSpan" class="">
          <el-form-item label="流水号" prop="serialNumber">
            <el-input
              v-model="formData.serialNumber"
              readonly
              placeholder="自动生成"
            />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan" class=""> </el-col>
        <el-col :span="itemSpan" class="">
          <el-form-item label="项目名称" prop="prjName">
            <el-input
              v-model="formData.prjName"
              readonly
              placeholder="请选择项目"
            />
          </el-form-item>
          <el-button class="bt_confirm" type="primary" plain @click="openSelect"
            ><el-icon><OfficeBuilding /></el-icon>选择</el-button
          >
        </el-col>
        <el-col :span="itemSpan" class="">
          <el-form-item label="项目编号" prop="prjNum">
            <el-input
              v-model="formData.prjName"
              readonly
              placeholder="选择项目后自动关联"
            />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan" class="">
          <el-form-item label="银行流水号" prop="bankSerialNumber">
            <el-input
              v-model="formData.bankSerialNumber"
              placeholder="银行流水号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan" class="">
          <el-form-item label="收支类型" prop="incomeType">
            <el-select
              v-model="formData.incomeType"
              class="m-2"
              placeholder="请选择"
            >
              <el-option
                v-for="item in incomeTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan" class="">
          <el-form-item label="交易类型" prop="tradeType">
            <el-select
              v-model="formData.tradeType"
              class="m-2"
              placeholder="请选择"
            >
              <el-option
                v-for="item in tradeTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan" class="">
          <el-form-item label="账户名称" prop="balance">
            <el-input
              v-model="formData.accountName"
              readonly
              placeholder="选择项目后自动关联"
            />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan" class="">
          <el-form-item label="银行账户" prop="balance">
            <el-input
              v-model="formData.bankNo"
              readonly
              placeholder="选择项目后自动关联"
            />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan" class="">
          <el-form-item label="对方户名" prop="oppositeName">
            <el-input
              v-model="formData.oppositeName"
              placeholder="请输入对方户名"
            />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan" class="">
          <el-form-item label="对方账户" prop="oppositeAccount">
            <el-input
              v-model="formData.oppositeAccount"
              placeholder="请输入对方账户"
            />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan" class="">
          <el-form-item label="收支金额" prop="amount">
            <el-input
              v-model="formData.amount"
              type="number"
              placeholder="请输入收支金额"
            />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan" class="">
          <el-form-item label="账户余额" prop="balance">
            <el-input
              v-model="formData.balance"
              type="number"
              placeholder="根据项目账户调动情况自动显示"
            />
          </el-form-item>
        </el-col>

        <el-col :span="itemSpan" class="">
          <el-form-item label="收支日期" prop="createTime">
            <el-date-picker
              v-model="formData.createTime"
              type="dates"
              placeholder="请选择日期"
              :disabled-date="disabledDate"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog_footer">
        <el-button type="primary" :loading="loading" @click="handleSubmit"
          >确认提交</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, computed } from "vue";
import {
  MessageParamsWithType,
  ElForm,
  pageHeaderEmits,
  FormRules,
} from "element-plus";
import { serialNumber } from "@/api/common/other/index";
import { getDicts } from "@/store/modules/dict";
import { useScreen } from "@/store/modules/screen";
import { createProjectAccountPayment } from "@/api/system/projectspecialaccount/index";
import { ProjectSpecialAccountPaymentEditForm } from "@/api/system/projectspecialaccount/types";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(900);
const itemSpan = ref(12);
const incomeTypes = getDicts("incomeType");
const tradeTypes = getDicts("tradingType");
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};

const props = defineProps({
  dialogAdd: {
    type: Object,
    default: () => ({
      visible: false,
      title: "",
      id: 0,
    }),
  },
  data: {
    type: Object,
    default: () => ({
      id: 0,
      serialNumber: "",
      projectId: 0,
      bankSerialNumber: "",
      bankNo: "",
      idNumber: "",
      username: "",
      wageDate: undefined,
      payable: 0,
      reality: 0,
      deduct: 0,
      paymentMethod: undefined,
      paymentDate: undefined,
      prjName: "",
      prjNum: "",
    }),
  },
  selectProject: {
    type: Object,
    default: () => ({
      id: 0,
    }),
  },
});

const emit = defineEmits(["sendClose", "sendOpenSelect"]);
const loading = ref(false);
let visible = ref(props.dialogAdd.visible);
const dataInfo = ref(props.data);
const selectProject = ref(props.selectProject);
const addFormRef = ref(ElForm);
const formData = reactive<ProjectSpecialAccountPaymentEditForm>({
  serialNumber: "",
  projectId: 0,
  prjName: "",
  prjNum: "",
  bankSerialNumber: "",
  incomeType: undefined,
  tradeType: undefined,
  accountName: "",
  bankNo: "",
  oppositeName: "",
  oppositeAccount: "",
  amount: 0,
  balance: 0,
  createTime: undefined,
});
Object.assign(formData, dataInfo.value);
if (selectProject.value.id > 0) {
  formData.projectId = selectProject.value.projectId;
  formData.prjName = selectProject.value.prjName;
  formData.prjNum = selectProject.value.prjNum;
  formData.bankNo = selectProject.value.bankNo;
  formData.balance = selectProject.value.balance;
  formData.accountName = selectProject.value.username;
}

const rules = reactive<FormRules<ProjectSpecialAccountPaymentEditForm>>({
  prjName: [{ required: true, message: "请选择项目", trigger: "blur" }],
  bankSerialNumber: [
    { required: true, message: "请输入银行流水号", trigger: "blur" },
  ],
  incomeType: [{ required: true, message: "请选择收支类型", trigger: "blur" }],
  tradeType: [{ required: true, message: "请选择交易类型", trigger: "blur" }],
  oppositeName: [
    { required: true, message: "请输入对方户名", trigger: "blur" },
  ],
  oppositeAccount: [
    { required: true, message: "请输入对方账户", trigger: "blur" },
  ],
  amount: [{ required: true, message: "请输入收支金额", trigger: "blur" }],
});

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
    itemSpan.value = 24;
  } else {
    screenWidth.value = 900;
    itemSpan.value = 12;
  }
}
onMounted(async () => {
  initScreen();
  let tempSerial = await serialNumber();
  formData.serialNumber = tempSerial.msg;
});

/* 发送当前弹窗关闭 */
function sendClose(query: boolean) {
  emit("sendClose", "add", query);
}

/**打开选择项目弹窗 */
function openSelect() {
  visible.value = false;
  emit("sendOpenSelect", formData);
}

/**
 * 关闭弹窗
 */
function closeDialog() {
  visible.value = false;
  sendClose(true);
  resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
  addFormRef.value.resetFields();
  addFormRef.value.clearValidate();
  formData.id = undefined;
}

/**
 * 项目表单提交
 */
function handleSubmit() {
  addFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      const id = dataInfo.value.id;
      if (id) {
        //原型图无修改逻辑不做修改处理
      } else {
        createProjectAccountPayment(formData)
          .then(
            (response: { success: boolean; msg: MessageParamsWithType }) => {
              if (response.success === true) {
                ElMessage.success(response.msg);
                closeDialog();
              } else {
                ElMessage.warning(response.msg);
              }
            }
          )
      }
    }
  });
}
</script>

<style lang="scss" scoped>
.bt_confirm {
  position: absolute !important;
  left: 385px !important;
  top: 50px !important;
}
.d_left {
  margin-left: 10px;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}

:deep(.el-input) {
  width: 80%;
}

:deep(.el-select) {
  width: 100%;
  margin: 0;
}

:deep(.el-input__wrapper) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
</style>
